<template>
  <van-cell-group>
    <van-cell
      disabled
      title="视频"
      style="width: 20%; float: left;"
    />
    <van-picker
      :columns="video_name"
      @change="onChangeVideo"
      style="width: 80%; float: right;"
    />
    <van-field
      v-model="title"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="题干"
      placeholder="请输入题干"
    />
    <div style="clear: both; height: 0;"></div>
    <van-field
      v-model="A"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="A"
      placeholder="请输入A选项内容"
    />
    <van-field
      v-model="B"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="B"
      placeholder="请输入B选项内容"
    />
    <van-field
      v-model="C"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="C"
      placeholder="请输入C选项内容"
    />
    <van-field
      v-model="D"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="D"
      placeholder="请输入D选项内容"
    />
    <van-cell
      disabled
      title="答案"
      style="width: 20%; float: left;"
    />
    <van-picker :columns="corrects" @change="onChangeCorrect"/>
    <van-button size="large" style="float: right;" @click="submitInfo">提交</van-button>
    <div style="clear: both; height: 0;"></div>
  </van-cell-group>
</template>

<script>
  import {Field, Cell, CellGroup, Stepper, Button, Icon, Picker, Toast} from 'vant';

  export default {
    name: "AddQuestions",
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Stepper.name]: Stepper,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Picker.name]: Picker,
      [Toast.name]: Toast,
    },
    data() {
      return {
        video_id: [],
        video_name: [],
        corrects: ['A', 'B', 'C', 'D', 'AB', 'AC', 'AD', 'BC', 'BD', 'CD', 'ABC', 'ABD', 'ACD', 'BCD', 'ABCD'],
        title: "",
        video: 0,
        A: "",
        B: "",
        C: "",
        D: "",
        correct: "A"
      }
    },
    props: ["videoStatus"],
    methods: {
      getVideo() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("exam"), {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        }).then((res) => {
          // console.log(res.data.data);
          let video_list = res.data.data;
          _this.video_id = [];
          _this.video_name = [];
          for (let i = 0; i < video_list.length; i++) {
            _this.video_id.push(video_list[i].id);
            _this.video_name.push(video_list[i].name);
          }
          _this.video = _this.video_id[0];
        });
      },
      submitInfo() {
        let _this = this;
        let token = _this.getCookie("token");
        let data = _this.$qs.stringify({
          'video_id': _this.video,
          'title': _this.title,
          'a': _this.A,
          'b': _this.B,
          'c': _this.C,
          'd': _this.D,
          'correct': _this.correct,
        });
        _this.$http.post(_this.apiUrl("user/exam/setVideoExam"), data, {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        }).then((res) => {
          // console.log(res.data);
          if (res.data.statusCode === 200) {
            Toast.success('添加成功');
            _this.video_id = "";
            _this.title = "";
            _this.A = "";
            _this.B = "";
            _this.C = "";
            _this.D = "";
            _this.correct = "";
            _this.audioPlay();
          }
        });
      },
      onChangeVideo(picker, value, index) {
        let _this = this;
        _this.video = _this.video_id[index];
      },
      onChangeCorrect(picker, value, index) {
        let _this = this;
        _this.correct = value;
      },
      audioPlay() {
        let _this = this;
        let RandomStr = _this.randomWord(true, 10, 20);
        _this.$emit('QuestStatus', RandomStr);
      },
    },
    mounted() {
      let _this = this;
      _this.getVideo();
    },
    watch: {
      "videoStatus": function () {
        let _this = this;
        _this.getVideo();
      }
    }
  }
</script>

<style scoped>

</style>
